<template>
	<NavBar icon="left" title="转账记录申请" />
	<view class="contain   bg-[#f2f2f2] p-2">
		<view class="text-[red] text-[12px] ">
			*提示：如果您有转账以下账户，请提交转账信息，客服审核通过后
			完成转账。
			<navigator url="/pages/admin/bank_transfer/recharge_entrance/recharge_entrance">
				<uv-button type="success" class="w-[80px] float-right" size="mini" text="微信充值入口"></uv-button>
			</navigator>
		</view>

		<view class="list mt-8 ">
			<view class=" item bg-white mb-2 p-2 pt-4 pb-4" v-for=" info in bankList">
				<view class="flex w-full ">
					<view class="w-[30%]  text-[#78848a]">
						银行账户:
					</view>
					<view class="w-[70%]    text-[#666666]">
						{{info.bankName}}
					</view>
				</view>
				<view class="flex w-full ">
					<view class="w-[30%]  text-[#78848a]">
						银行名称:
					</view>
					<view class="w-[70%]    text-[#666666]">
						{{info.bankAccount}}
					</view>
				</view>
				<view class="flex w-full ">
					<view class="w-[30%]  text-[#78848a]">
						户口持有人:
					</view>
					<view class="w-[70%]    text-[#666666]">
						{{info.hukou}}
					</view>
				</view>
				<view class="flex w-full flex-row-reverse pt-2">
					<uv-button @click="open(info)" type="primary" class="w-[80px] float-right" size="small"
						text="转账申报"></uv-button>
				</view>
			</view>

		</view>
		<!-- 转账申报 -->
		<uv-popup ref="popup" mode="center" @change="change">
			<view class="p-2  " style="width: 700rpx;height: 60vh;">
				<view class="text-center">转账</view>
				<uv-form labelWidth="100" labelPosition="left" :model="form" :rules="rules" ref="formDom">
					<uv-form-item label="金额:" borderBottom prop="amountOfMoney">
						<uv-input clearable  placeholder="请输入金额" v-model="form.amountOfMoney" border="none">
						</uv-input>
					</uv-form-item><uv-form-item label="交易号:" prop="transactionNumber" borderBottom>
						<uv-input clearable  placeholder="请输入交易号" v-model="form.transactionNumber" border="none">
						</uv-input>
					</uv-form-item>
					<uv-form-item label="付款人姓名:" prop="paymentName" borderBottom>
						<uv-input clearable  placeholder="请输入付款人姓名" v-model=" form.paymentName" border="none">
						</uv-input>
					</uv-form-item>
					<uv-form-item label="付款人电话:" prop="telephone" borderBottom>
						<uv-input clearable  placeholder="请输入付款人电话" v-model=" form.telephone" border="none">
						</uv-input>
					</uv-form-item>
					<uv-form-item :borderBottom="false" label="付款凭证图:" prop="voucherPicture">
						<!-- <uv-image @click="upload" v-if="form.voucherPicture" :src="form.voucherPicture" width="80px"
							height="80px"></uv-image> -->
						<!-- <uv-icon @click="upload"  name="plus" size="60" color="#ccc" class="border"></uv-icon> -->
						<input type="file" @change="chooseImg"/>
					</uv-form-item>
				</uv-form>
				<uv-button type="primary" text="提交" customStyle="margin-top: 10px" @click="submit"></uv-button>
			</view>
		</uv-popup>

	</view>
</template>

<script setup>
	import dayjs from 'dayjs'
	import store from '@/store/index.js'
	const user = store().user
	import * as api from '@/api/modules/bank_transfer.js'
	console.log(user.userInfo)
	const form = ref({})
	const initializedData = () => {
		form.value = {
			amountOfMoney: '', //金额
			transactionNumber: '', //交易号
			paymentName: '', //付款姓名
			paymentName: '', //付款姓名 
			telephone: '', //付款人电话
			// voucherPicture: '', //凭证图片地址
			transactionDate: null,
			userName: user.userInfo.userName,
			userId: user.userInfo.userId
		}
	}
	initializedData()
	const bankList = [{
			bankAccount: 'xht@dellker.com',
			bankName: '支付宝',
			hukou: '深圳市前海新和泰供应施有限公司'
		},
		{
			bankAccount: '44201504200052532210',
			bankName: '中国建设银行深圳黄贝岭支行',
			hukou: '深圳市前海新和泰供应施有限公司'
		}
	]
	// 上传凭证
	// const upload = () => {
	// 	uni.chooseImage({
	// 		count: 1,
	// 		success: (res) => {
	// 			  form.value.voucherPicture = res.tempFiles[0] 
	// 		}
	// 	});
	// }
	// 
	const popup = ref()
	const currentBank = ref({})
	const open = (info) => {
		currentBank.value = {
			...info
		}
		popup.value.open();
	}
	const change = (e) => {
		if (!e.show) {
			initializedData()
		}
	}

	const rules = ref({
		'amountOfMoney': [{
				type: 'number',
				message: '金额应为数字类型',
				trigger: ['blur', 'change']
			},
			{
				validator: (rule, value, callback) => {
					return !!value
				},
				message: '请输入金额',
				trigger: ['blur']
			}],
		'transactionNumber': {
			type: 'string',
			required: true,
			message: '请填写交易号',
			trigger: ['blur', 'change']
		},
		'paymentName': {
			type: 'string',
			required: true,
			message: '请填写付款姓名',
			trigger: ['blur', 'change']
		},
		'telephone': [{
				type: 'string',
				required: true,
				message: '请填写付款电话',
				trigger: ['blur', 'change']
			},
			{
				validator: (rule, value, callback) => {
					const reg = /^(?:(?:\+|00)86)?1[3-9]\d{9}$/
					return reg.test(value)
				},
				message: '请填写正确的付款电话',
				trigger: ['blur']
			}
		],
	})
const chooseImg = (event) => {
    const file = event.target.files[0];
    console.log('上传的文件对象:', file);
	   console.log('上传的文件对象:', file);
	
	    // 打印其他属性
	    console.log('文件名:', file.name);
	    console.log('文件大小:', file.size);
	    console.log('文件类型:', file.type);
  }
	const formDom = ref()
	const submit = () => {
		// if (!form.value.voucherPicture) return uni.showToast({
		// 	title: '请上传凭证',
		// 	icon: 'none'
		// })
		 
		formDom.value?.validate().then(async () => {
			form.value.transactionDate = dayjs().format('YYYY/MM/DD HH:mm:ss')
			const config = {
				...form.value,
				...currentBank.value
			} 
			
			    // formData.append('file', file);
			 const formData = new FormData();  
				for(let key in config){
					// 添加其他数据到 FormData
					formData.append(key, config[key])
				} 
			 console.log(config,1);
			 console.log(formData,2);
			 console.dir(formData,3);
			await api.addBankTransferRecordAPI(formData) 
		}).catch(errors => {
			uni.showToast({
				title: '编辑失败',
				icon: 'none'
			})
			
		}).finally(()=>{
				popup.value.close()
			})
	}
	
	
	
	 
</script>

<style lang="scss">
	.contain {
		height: calc(100vh - 44px);

		.uv-popup .uv-popup__content.right {
			width: 100vw;
		}
	}
</style>